<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mark spacings - Sketch Measure 2.0</title>

    <link href="assets/css/normalize.css" rel="stylesheet">
    <link href="assets/css/app.css" rel="stylesheet">
    <script type="text/javascript" src="assets/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="assets/js/common.js"></script>
    <script type="text/javascript">
    <!--
    var submit = function(){
            var options = {},
                placements = [];
            $('input[name=placemen]:checked').each(function(){
                var $this = $(this);
                placements.push($this.val());
            });

            options.placements = placements;
            if( $('input[name=percentage]:checked').length > 0 ) options.byPercentage = 1;
            SMAction('submit', options);
        },
        togggleButton = function(){
            if( $('input[name=placemen]:checked').length <= 0 ){
                $('.submit').attr('disabled', true);
            }
            else{
                $('.submit').attr('disabled', false);
            }
        },
        init = function(options){
            $('body').html([
                '<div class="container">',
                    '<div class="options" style="height: 192px">',
                        '<div class="mrb16">',
                            '<div class="slidebox">',
                                '<input id="top" type="checkbox" name="placemen" value="top">',
                                '<label for="top"></label>',
                            '</div>',
                            '<label for="top">' + _('Top') + '</label>',
                        '</div>',
                        '<div class="mrb16">',
                            '<div class="slidebox">',
                                '<input id="right" type="checkbox" name="placemen" value="right">',
                                '<label for="right"></label>',
                            '</div>',
                            '<label for="right">' + _('Right') + '</label>',
                        '</div>',
                        '<div class="mrb16">',
                            '<div class="slidebox">',
                                '<input id="bottom" type="checkbox" name="placemen" value="bottom">',
                                '<label for="bottom"></label>',
                            '</div>',
                            '<label for="bottom">' + _('Bottom') + '</label>',
                        '</div>',
                        '<div class="mrb24">',
                            '<div class="slidebox">',
                                '<input id="left" type="checkbox" name="placemen" value="left">',
                                '<label for="left"></label>',
                            '</div>',
                            '<label for="left">' + _('Left') + '</label>',
                        '</div>',
                        '<div>',
                            '<label class="item mrb10">',
                                '<div class="checkbox">',
                                    '<input id="percentage" type="checkbox" name="percentage" value="1">',
                                    '<label for="percentage"></label>',
                                '</div>',
                                _('Percentage of artboard'),
                            '</label>',
                        '</div>',
                    '</div>',
                    '<div class="footer">',
                        '<button id="submit" class="submit">' + _('Mark') + '</button>',
                    '</div>',
                '</div>'
                ].join(''))
            var options = $.extend({
                placements: ['top', 'left']
            }, options);

            $.each(options.placements, function(i, placemen){
                $('#' + placemen).attr('checked', true);
            });

            if(options.byPercentage){
                $('#percentage').attr('checked', true);
            }

            togggleButton();
            $('input[type=checkbox]').change(togggleButton);
            $('#submit').click(submit);

        }
    -->
    </script>
  </head>
  <body></body>
</html>
